<template>
  <div class="main-header">
    <el-card class="box-card" style="height: 300px;" shadow="never">
      <div slot="header" class="cardHeard" style="height: 38px">
        <div>
          <span class="title">远程协助配置
            <span
            style="color:#d2d7e3;font-size:20px;margin-top:10px;padding-left:10px;padding-bottom:5px;">
            <el-tooltip class="item" effect="dark" placement="right">
              <i class="el-icon-question"></i>
              <div style="width: 420px;" slot="content">全部填空使用厂商内置默认服务器</div>
            </el-tooltip>
          </span>
          </span>
        </div>
        <div>
          <el-button style="float: right; margin-left:5px;" type="primary" @click="saveSettings()">保存设置</el-button>
        </div>
      </div>
      <div>
        <el-form :model="remote" ref="remote" label-width="150px">
          <el-row :gutter="24">
            <div style="margin-bottom: 20px;">
              <div style="margin-bottom: 10px;">
                <span style="width: 150px;display: inline-block;text-align: right;font-size: 14px; color:#606266;">ID服务器：</span>
                <el-input v-model="remote.IDSvr" oninput="value=value.replace(/[^0-9a-zA-Z.:/?#=&_-]/g,'')" maxlength="100" size="small"></el-input>
              </div>
              <div style="margin-bottom: 10px;">
                <span style="width: 150px;display: inline-block;text-align: right;font-size: 14px; color:#606266;">中继服务器：</span>
                <el-input v-model="remote.RelaySvr" oninput="value=value.replace(/[^0-9a-zA-Z.:/?#=&_-]/g,'')" maxlength="100"  size="small"></el-input>
              </div>
              <div style="margin-bottom: 10px;">
                <span style="width: 150px;display: inline-block;text-align: right;font-size: 14px; color:#606266;">Key：</span>
                <el-input v-model="remote.Key" oninput="value = value.replace(/[\u4e00-\u9fa5\uff00-\uffef]/g, '')" maxlength="64" size="small" show-password></el-input>
              </div>
            </div>
          </el-row>
        </el-form>
      </div>
      <div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { connrequest } from "@/api/firstPage"
import { comprehensiveRegex } from '@/utils/RegularExpression'
export default {
  data() {
    return {
      remote: {},
    }
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      const data = {
        Filter: {
          FileName: 'param_rustdesk_relay_cfg.json'
        }
      }
      const res = await connrequest('GetUICommonParam', data)
      this.remote = res.Data
    },
    async saveSettings() {
      const { IDSvr, RelaySvr, Key } = this.remote;
      // 检查是否部分填写但不完整
      const hasAny = IDSvr || RelaySvr || Key;
      const hasAll = IDSvr && RelaySvr && Key;
      if (hasAny && !hasAll) {
        this.$message.error('请同时填写 ID服务器、中继服务器 和 Key');
        return false;
      }
      // 校验 IDSvr
      if (IDSvr && !comprehensiveRegex.test(IDSvr)) {
        this.$message.error('请输入正确的 ID 服务器地址');
        return false;
      }
      // 校验 RelaySvr
      if (RelaySvr && !comprehensiveRegex.test(RelaySvr)) {
        this.$message.error('请输入正确的中继服务器地址');
        return false;
      }
      const data = {
        Filter: {
          FileName: 'param_rustdesk_relay_cfg.json'
        },
        Data: this.remote
      };
      const res = await connrequest('SetUICommonParam', data);
      if (res.Status.StatusCode === 0) {
        this.$message({
          type: 'success',
          message: `保存成功!`
        });
        this.getData();
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.box-card {
  // margin: 16px;
  margin-bottom: 10px !important;
}

.cardHeard {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

::v-deep .el-input--small {
  width: calc(100% - 150px) !important;
}

::v-deep .el-card__header {
  padding: 10px !important;
}

.el-form-item {
  margin-bottom: 10px !important;
}

::v-deep .el-form-item__error {
  padding-top: 0 !important;
}
</style>